﻿@model Slide
@using NITASA.Data
@{
    ViewBag.Title = "Manage Slider";
    List<Slide> Slides= ViewBag.Slides;
}
<div class="main-content">
    <div class="container-fluid padded">
        @if (TempData["SuccessMessage"] != null)
        {
            <div class="alert alert-success">
                <button class="close" data-dismiss="alert" type="button">
                    ×
                </button>
                @TempData["SuccessMessage"]
            </div>
        }
        @if (TempData["ErrorMessage"] != null)
        {
            <div class="alert alert-error">
                <button class="close" data-dismiss="alert" type="button">
                    ×
                </button>
                @TempData["ErrorMessage"]
            </div>
        }
        <div class="row-fluid">
            <div class="span12">
                <div class="box">
                    <div class="box-header">
                        <span class="title">Add Slide</span>
                        <ul class="box-toolbar">
                            <li>
                                <a href="@Url.Action("List", "Slider")" title="Back to Slider List"><i class="icon-reply" style="margin-top: 10px"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="box-content">
                        <div class="padded">
                            @using (Html.BeginForm("Add", "Slides", FormMethod.Post))
                            {
                                @Html.HiddenFor(m => m.SliderId)
                                @Html.Hidden("MGUID", (string)ViewBag.MGUID)
                                <div class="form-horizontal fill-up">
                                    <div class="span6">
                                        <div class="control-group">
                                            <div style="display: inline;">
                                                <label class="control-label width110px" style="text-align: left; display: inline; float: left;">Slider Image</label>
                                                <input type="button" id="showImgPopup" class="btn btn-small btn-blue" value="Select" style="float: left; text-align: left;" />
                                                <label class="width110px" id="imagename" style="float: left; text-align: left; padding-left: 10px;"></label>
                                                <div style="color: red; display: inline">@Html.ValidationMessageFor(m => m.Image) </div>
                                                <div style="clear: both;"></div>
                                            </div>
                                            <div>
                                                <label class="control-label width110px" style="text-align: left;">
                                                </label>
                                                (Only .jpg, .bmp, .jpeg, .png, .gif files are allowed.)
                                            </div>
                                            <label class="control-label width110px" style="text-align: left;"></label>
                                            <div>
                                                @Html.TextBoxFor(m => m.Image, new { style="display:none;"})
                                                <img id="uploadedImage" style="height: 100px; max-width: 100px; margin-top: 10px;" alt="" />
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label width110px" style="text-align: left;">
                                                &nbsp;
                                            </label>
                                            <div style="">
                                                <input type="submit" value="Add Slide" class="btn btn-blue" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="control-group">
                                            <label class="control-label width110px" style="text-align: left;">
                                                Image Title
                                            </label>
                                            <div>
                                                @Html.TextBoxFor(m => m.Title)
                                                <div style="color: red">
                                                    @Html.ValidationMessageFor(m => m.Title)
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label width110px" style="text-align: left;">
                                                Image Link
                                            </label>
                                            <div>
                                                @Html.TextBoxFor(m => m.Link)
                                                <div style="color: red">
                                                    @Html.ValidationMessageFor(m => m.Link)
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label width110px" style="text-align: left;">
                                                Image Description
                                            </label>
                                            <div>
                                                @Html.TextAreaFor(m => m.Text)
                                                <div style="color: red">
                                                    @Html.ValidationMessageFor(m => m.Text)
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                <div class="clear">
                </div>
                <div class="box">
                    <div class="box-header">
                        <span class="title">Slider Image List</span>
                        <ul class="box-toolbar">
                            <li><a class="btn btn-blue" href="#" id="UpdateSlideOrder" title="Update Slide Order">Update Slide Order</a></li>
                        </ul>
                    </div>
                    <div class="box-content">
                        <table class="table table-normal">
                            <thead>
                                <tr>
                                    <td style="width: 70px">
                                        Slide Image
                                    </td>
                                    <td style="width: 200px">
                                        Slide Title
                                    </td>
                                    <td style="width: 200px">
                                        Slider Link
                                    </td>
                                    <td style="width: 400px">
                                        Slider Content
                                    </td>
                                    <td style="width: 40px">
                                        Delete
                                    </td>
                                </tr>
                            </thead>
                            <tbody id="tblsliders">
                                @using (Html.BeginForm("Delete", "Slider", FormMethod.Post))
                                {
                                    for (int i = 0; i < @Slides.Count(); i++)
                                    {
                                        <tr class="grid-row" id="@Slides[i].ID" style="cursor:pointer;">
                                            <td>
                                                <a href="#">
                                                    <img src='@Slides[i].Image' style="height:35px;width:35px;border-radius:50%" alt="" />
                                                </a>
                                            </td>
                                            <td style="text-align: center">
                                                <a href="#">@Slides[i].Title</a>
                                            </td>
                                            <td style="text-align: center">
                                                @Slides[i].Link
                                        </td>
                                        <td style="text-align: center">
                                            @Slides[i].Text
                                    </td>
                                    <td style="text-align: center">
                                        @Html.ActionLink("Delete", "Delete", new { GUID = @Slides[i].GUID, MGUID = (string)ViewBag.MGUID }, new { onclick = "return confirm('Are you sure you want to delete this slide ?');", @class = "btn btn-small btn-red" })
                                    </td>
                                </tr>
                                    }

                                }
                            </tbody>
                        </table>
                        @using (Html.BeginForm("UpdateDisplayOrder", "Slides", FormMethod.Post, new { id = "frmorder" }))
                        {
                            @Html.Hidden("slideidlist")
                            @Html.Hidden("MID", (int)ViewBag.MID)
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@{Html.RenderAction("GetMedia", "Media");}

@section BottomScript{
    <script type="text/javascript">
        $(document).ready(function () {

            $("#UpdateSlideOrder").click(function () {
                $("#frmorder").submit();
                return false;
            });

            $("#showImgPopup").click(function (e) {
                e.preventDefault();
                $("#MediaPopup").modal("show");
            });
            $("body").delegate(".wizard-input-section .media-thumb .imgSelect", "click", function () {
                var imgPath = $(this).attr("src");
                $("#uploadedImage").attr("src", imgPath);
                var img = imgPath.replace('/content/media/', '');
                $("#Image").val(imgPath);
                $('#imagename').text(img);
                $("#MediaPopup").modal("hide");
            });
            $(function () {
                $("#tblsliders").sortable({
                    placeholder: "ui-state-highlight",
                    sort: function (event, ui) {
                        //ui.helper.css({ 'top': ui.position.top + 'px' });
                        var $target = $(event.target);
                        if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
                            var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
                            ui.helper.css({ 'top': top + 'px' });
                        }
                    },
                    stop: function (event, ui) {
                        getSliders();
                    }
                });
                //$( "#sortable" ).disableSelection();
            });
            getSliders();
            function getSliders() {
                var data = "";
                $("#tblsliders tr").each(function (i, el) {
                    var p = $(el).attr("id");
                    data += p + ",";
                });
                $("#slideidlist").val(data);
            }
        });
    </script>
}